<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
            箭头函数
                es6中定义函数的方式
                () => {};
                箭头函数赋值给变量

                如果函数体中只有一句代码，并且代码的执行结果就是返回值，则可以省略大括号

                如果形参只有一个，可以省略小括号

                箭头函数不绑定this关键字，指向的是函数定义位置的上下文this
         */

        const fn = () => {
            console.log("fn函数");
        }
        fn();

        // const sum = (a, b) => {
        //     return a + b
        // }
        //简化
        const sum = (a, b) => a + b
        console.log(sum(2, 3));

        // const fn2 = (s) => {
        //     return s
        // }
        // 简化
        const fn2 = s => s

        fn2("hello")

        const obj = {
            name: "xiaoxi"
        }

        function open1() {
            console.log(this); // obj
            return function () {
                console.log(this); //obj
            }
        }
        // 箭头函数不绑定this
        function open2() {
            console.log(this); // obj
            return () => {
                console.log(this); //obj
            }
        }
        const resFn1 = open1.call(obj); // this指向obj
        const resFn2 = open2.call(obj); // this指向obj
        resFn1(); // this 指向调用resFn函数的window对象
        // resFn2(); // this 不指向调用resFn函数的window对象, 而指向函数定义位置的this即 obj
    </script>
</body>

</html>